<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="2">
            <h3 class="box-title">项目结题</h3>
          </el-col>

          <!-- 搜索 -->
          <el-col :span="22">
            <!-- 发布项目 v-if="operating3" -->
            <el-button
              class="btn-link-large add-btn"
              @click="seeAdd = true"
              
            >
              <i class="el-icon-plus el-icon--right"> 发布项目</i>
            </el-button>
            <el-cascader
              style="width: 20%;"
              placeholder="申报类型"
              v-model="searchType"
              :options="options"
              :props="{ expandTrigger: 'hover',value: 'id', label: 'title' }"
              clearable></el-cascader>
            <el-date-picker
              style="margin-left: 10px;"
              v-model="searchYear"
              type="year"
              value-format="yyyy"
              placeholder="申报年度"
            ></el-date-picker>
            <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button>
          </el-col>
          <!-- 新增培训信息 -->
    <el-dialog title="新增项目信息" :visible.sync="seeAdd" width="20%" center>
      <el-form :model="trainData">
        <el-date-picker
          style="width: 100%;"
          v-model="trainData.start_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="项目开始时间"
        ></el-date-picker>
        <el-date-picker
          style="width: 100%;margin:10px auto;"
          v-model="trainData.end_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="项目结束时间"
        ></el-date-picker>
        <el-date-picker
          style="width: 100%;"
          v-model="trainData.year"
          type="year"
          value-format="yyyy"
          placeholder="申报年度"
        ></el-date-picker>
        <el-cascader
          style="width: 100%;margin:10px auto;"
          placeholder="申报类型"
          v-model="type"
          :options="options"
          :props="{ expandTrigger: 'hover', value: 'id', label: 'title' }"
          clearable
        ></el-cascader>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seeAdd = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="tableData"
            v-loading="loading"
            stripe
            style="width: 100%"
            @row-click="clickRow">
            <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
            <el-table-column prop="type" label="申报类型" sortable :formatter="showName" width="350"></el-table-column>
            <el-table-column prop="year" label="申报年度" sortable></el-table-column>
            <el-table-column prop="start_time" label="申报开始时间" sortable></el-table-column>
            <el-table-column prop="end_time" label="申报结束时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="状态">
              <template scope="scope" >
                <el-tag type="success" v-if="scope.row.status == 1" close-transition width="80">进行中</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2" close-transition>已结束</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="250" v-if="operating">
              <template slot-scope="scope">
                <el-button
                  v-popover:popover5
                  style="background: #367fa9;"
                  size="small"
                  type="primary"
                  icon="el-icon-video-play"
                  :disabled="scope.row.status == 2" 
                  @click.stop="apply(scope.row)"
                >申请</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data () {
    return {
      currentPage: 1,
      total: 1,
      tableData: [],
      loading: true,
      searchType: [],
      searchYear: '',
      options: [],
      saveData: {},
      seeAdd: false,
      trainData: {}
      // operating: false
    }
  },
  methods: {
    /* apply (row) {
      console.log(row)
      router.push({ name: 'subendpro', params: { id: row.id }})
    }, */
    showName (row) {
      //console.log(row.children)
      if (row.parent == this.options[0].id) {
        // 14 实践育人项目
        let pName = this.options[0].title
        let cName
        this.options[0].children.forEach(element => {
          if (element.id == row.children) {
            cName = element.title
          }
        })
        return pName + ' / ' + cName
      } else if (row.parent == this.options[1].id) {
        // 15 学生工作精品项目
        let pName = this.options[1].title
        let cName
        this.options[1].children.forEach(element => {
          if (element.id == row.children) {
            cName = element.title
          }
        })
        return pName + ' / ' + cName
      }
    },
    add() {
      this.seeAdd = false
      if (this.type.length === 0) {
        _g.toastMsg('error', '【申报类型】不能为空')
      } else {
        var checkResult = this.checkList(this.trainData, [
          {
            name: 'start_time',
            reg: ['notnull']
          },
          {
            name: 'end_time',
            reg: ['notnull']
          },
          {
            name: 'year',
            reg: ['notnull']
          }
        ])
        if (_g.j2s(checkResult) === '{}') {
          let data = {
            start_time: this.trainData.start_time,
            end_time: this.trainData.end_time,
            year: this.trainData.year,
            parent: this.type[0],
            children: this.type.length >= 2 ? this.type[1] : 0
          }
          this.apiPost('admin/Report/EduWrite', data).then(res => {
            this.handelResponse(res, data => {
              _g.toastMsg('success', '项目新增成功')
              this.init()
              this.trainData = {}
              this.type = []
            })
          })
        } else {
          for (const key in checkResult) {
            _g.toastMsg('error', this.tips[key] + checkResult[key])
            break
          }
        }
      }
    },
    Search () {
      /* console.log(this.searchType, this.searchYear)
      let data = {
        year: this.searchYear,
        parent: this.searchType[0],
        children: this.searchType.length >= 2 ? this.searchType[1] : 0
      }
      this.getList(data) */
      this.saveData = {
        searchYear: this.searchYear,
        searchType: this.searchType
      }
      // this.getList()
      this.handleCurrentChange(this.currentPage)
    },
    // 点击培训信息下的页码，返回对应的数据
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.saveData.currentPage = this.currentPage
      // this.currentPage = this.$route.params.currentPage ? this.$route.params.currentPage : this.currentPage
      this.getList()
    },
    // 跳转子项目list
    clickRow (row) {
      router.push({ name: 'stdetailpro', params: { id: row.id, class: row.parent, saveData: this.saveData }})
    },
    // 获取页面的项目类型下拉列表的数据
    init () {
      this.searchYear = this.$route.params.saveData
        ? this.$route.params.saveData.searchYear
        : ''
      this.searchType = this.$route.params.saveData
        ? this.$route.params.saveData.searchType
        : []
      this.currentPage = this.$route.params.saveData
        ? this.$route.params.saveData.currentPage
        : 1
      this.apiPost('admin/Report/DropdowmList').then((res) => {
        this.handelResponse(res, (data) => {
          this.options = res.data.type
          // 获取页面的list
          // this.getList()
          this.Search()
        })
      })
    },
    getList () {
      this.loading = true
      let data = {
        page: this.currentPage,
        year: this.searchYear,
        parent: this.searchType.length >= 1 ? this.searchType[0] : '',
        children: this.searchType.length >= 2 ? this.searchType[1] : 0
      }
      this.apiPost('admin/Report/EduList', data).then((res) => {
        this.handelResponse(res, (data) => {
          console.log(res.data)
          this.tableData = res.data.data
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
    /* if (Lockr.get('userInfo').level === 1) {
      this.operating = true
    } */
  },
  mounted() {
  },
  mixins: [http]
}

</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
  /* padding: 2px 0 0 20px; */
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}
</style>>
